<template>
  <div>
    <mt-header title="訂單記錄">

        <div slot="left" @click="back">
        <mt-button icon="back"></mt-button>
        </div>

    </mt-header>

    <!-- tab-container -->
    <mt-navbar v-model="selected" >
      <div style="width: 50%" @click="getCc">
        <mt-tab-item id="1"  >持倉中</mt-tab-item>
      </div>
      <div style="width: 50%" @click="getPc">
        <mt-tab-item id="2" >已平倉</mt-tab-item>
      </div>
    </mt-navbar>
    <!-- tab-container -->


    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div   v-for="item in ccList" class="content">
          <div class="content-left">
            <div class="goods">
              <span class="goods-top">{{item.ptitle}}</span>
              <span>{{item.endprofit}}s</span>
              <img src="../../assets/img/buytop.png" v-if="item.ostyle==0" />
              <img src="../../assets/img/buydown.png" v-else>
              <span style="color: #ee0a24">{{item.fee}}usd</span>
            </div>
            <div><span>{{item.bugprice}} - </span><span>{{item.bugprice}}</span></div>
            <div>{{item.buytime | moment}}</div>
          </div>
          <div class="content-right">
            <div v-if="item.ploss>0">+{{item.ploss}}</div>
            <div v-if="item.ploss<0">{{item.ploss}}</div>
            <div>{{item.selltime | moment}}</div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div v-for="item in pcList" class="content">
          <div class="content-left">
            <div class="goods">
              <span class="goods-top">{{item.ptitle}}</span>
              <span>{{item.endprofit}}s</span>
              <img src="../../assets/img/buytop.png" v-if="item.ostyle==0" />
              <img src="../../assets/img/buydown.png" v-else>
              <span>${{item.fee}}</span>
            </div>
            <div><span>{{item.bugprice}} </span><span>{{item.sellprice}}</span></div>
            <div>{{item.buytime  |  moment}}</div>
          </div>
          <div class="content-right">
            <div v-if="item.ploss>=0">+{{item.ploss}}</div>
            <div v-if="item.ploss<0">{{item.ploss}}</div>
            <div>{{item.selltime  |  moment}}</div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>

</template>

<script>
  import Vue from 'vue';
  import {Header} from 'mint-ui';
  import {cc} from '../../api/cc';
  import {pc} from '../../api/pc';
  import {MessageBox} from 'mint-ui';
  Vue.component(Header.name, Header);
  import {Navbar, TabItem} from 'mint-ui';
  import {TabContainer, TabContainerItem} from 'mint-ui';
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);
  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);


  export default {
    name: "index",
    data() {
      return {
        selected:'1',
        ccList:{} ,
        pcList:{} ,
        userInfo:{}
      }
    },
    methods:{
      getCc(){
        cc({
          uid:this.userInfo.uid
        }).then((data)=>{
          if (data.errorCode==0){
            this.ccList=data.data
          }
        });
      },
      getPc(){
        pc({
          uid:this.userInfo.uid
        }).then((data)=>{
          if (data.errorCode==0){
            this.pcList=data.data.data
          }
        })
      },
      back(){
        this.$router.go(-1);//返回上一层
      },

    },
    mounted() {
    if (!window.localStorage.getItem('userInfo')){
        this.$router.push({path: '/'})
        } else {
        this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        cc({
            uid:this.userInfo.uid
        }).then((data)=>{
            if (data.errorCode==0){
                this.ccList=data.data
            }
        });
        pc({
            uid:this.userInfo.uid
        }).then((data)=>{
          console.log(data)
            if (data.errorCode==0){
                this.pcList=data.data.data
              console.log(this.pcList)
            }
        })

      }

    },


  }
</script>

<style scoped>
  .content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 66px;
    font-size: 12px;
    border-top: 1px solid #C0C4CC;
    border-bottom: 1px solid #4681f5;
  }

  .content-left {
    display: flex;
    flex-direction: column;
    width: 50%;
  }

  .content-left .goods-top{
    font-size: 14px;
    font-weight: bold;
  }
  .content-left .goods span:nth-child(4) {
    color: darkgreen;
  }
  .content-left div {
    margin: 1px 0;
  }

  .content-right {
    display: flex;
    flex-direction: column;
    width: 40%;
    justify-content: center;
    text-align: right;
  }

  .content-right div:nth-child(1) {
    font-size: 14px;
    color: darkred;
  }

</style>
